<template>
  <div class="echarts">
    
  </div>
</template>

<script>
import { defineComponent, watch, onMounted } from "vue";
import Echarts from "echarts";
export default defineComponent({
  name: "VueEcharts",
  props: {
    options: Object,
  },
  setup(ctx) {
    let dom;
    let chart;

    const initChart = () => {
      if (!chart) {
        dom = document.getElementsByClassName("echarts")[0];
        chart = Echarts.init(dom);
      }
      chart.setOption(ctx.options);
    };

    onMounted(() => {
      initChart();
    });

    watch(
      () => ctx.options,
      () => {
        initEchart();
      }
    );
  },
});
</script>

<style lang="less">
</style>
